<template>
  <div>
    <div class="query-from">
      <el-form
        :inline="true"
        class="demo-form-inline"
        ref="searchForm"
        :model="data"
      >
        <el-form-item label="审批状态" label-width="100px" prop="state">
          <el-select v-model="data.applyState" placeholder="请选择状态">
            <el-option label="全部" value="" />
            <el-option label="待审批" :value="1" />
            <el-option label="审批中" :value="2" />
            <el-option label="审批拒绝" :value="3" />
            <el-option label="审批通过" :value="4" />
            <el-option label="作废" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getLeaveList">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <el-table :data="leaveList" style="width: 100%" row-key="_id">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template #default="scope">
            <el-button type="primary" @click="checkSistaution(scope.row)" :disabled="scope.row.applyState=='1'?false:scope.row.applyState=='2'?false:true"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="example-pagination-block">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="getNewList"
          :page-size="data.pageSize"
        />
      </div>

      <el-dialog v-model="showSituation">
        <el-form :model="formsiti" title="申请休假情况" :rules="rules">
          <el-form-item label="申请人"  label-width="100px">
            {{ userName}}
          </el-form-item>

          <el-form-item label="休假类型" prop="time" label-width="100px">
            {{
              formsiti.applyType == 1
                ? "事假"
                : formsiti.applyType == 2
                ? "调休"
                : "年假"
            }}
          </el-form-item>

          <el-form-item label="休假时长" label-width="100px">
            {{ formsiti.leaveTime }}
          </el-form-item>
          <el-form-item label="休假时间" label-width="100px">
            {{
              utils
                .formateDate(new Date(formsiti.startTime))
                .replace("00:00:00", "")
            }}到{{
              " " +
              utils
                .formateDate(new Date(formsiti.endTime))
                .replace("00:00:00", "")
            }}
          </el-form-item>
          <el-form-item label="休假原因" prop="reasons" label-width="100px">
            {{ formsiti.reasons }}
          </el-form-item>
          <el-form-item label="审批状态" prop="reasons" label-width="100px">
            {{
              formsiti.applyState == 1
                ? "待审批"
                : formsiti.applyState == 2
                ? "审批中"
                : formsiti.applyState == 3
                ? "审批拒绝"
                : formsiti.applyState == 4
                ? "审批通过"
                : "作废"
            }}
          </el-form-item>
          <el-form-item label="审批人" prop="reasons" label-width="100px">
            {{ formsiti.curAuditUserName }}
          </el-form-item>
          <el-form-item label="备注" prop="remark" label-width="100px">
            <el-input v-model="formsiti.remark" autocomplete="false" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span>
            <el-button type="primary" @click="judge('pass')"
              >审核通过</el-button
            >
            <el-button type="danger" @click="judge('refuse')">驳回</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import api from "../api/index.js";
import { ref, reactive, toRaw, nextTick } from "vue";
import utils from "../utils/index.js";
import { ElMessage, formatter } from "element-plus";
const data = reactive({
  type: "approve", // approve:审核  默认用户审批列表
  applyState: "",
  pageNum: 1,
  pageSize: 10,
});
const total = ref();

const formsiti = ref({});
let showMadol = ref(false);
const showSituation = ref(false);
let username=ref()
//加载动画
const loading = ref(true);
const rules = reactive({
  remark: {
    required: true,
    message: "备注必须填写",
    trigger: "blur",
  },
});

const checkSistaution = (row) => {
  console.log(row);
  formsiti.value = row;
  showSituation.value = true;
username.value=formsiti.value.applyUser.userName
};
//审核或驳回申请
const judge =async (action) => {
  let data = {
              _id:formsiti.value._id,
              remark0:formsiti.value.remark,
              action: action, //pass refuse
            };
            console.log(data);
             let result;
  try {
    result = await api.judegLeave(data);
  } catch (error) {
    console.log(error.data);
    showSituation.value=false
    ElMessage.error("审核失败");
  }

  if (result.data.code == 200) {
    formsiti.value= {};
    ElMessage.success('审核成功');
    showSituation.value=false
  }
};

//表格头
const columns = reactive([
  {
    label: "单号",
    prop: "orderNo",
    width: 150,
  },
  {
    label: "休假时间",
    prop: "time",
  },
   {
    label: "申请人",
    prop: "applyUser",
     formatter(row, column, value) {
      return value.userName
    },
  },
  {
    label: "休假类型",
    prop: "applyType",
    formatter(row, column, value) {
      return {
        1: "事假",
        2: "调休",
        3: "年假",
      }[value];
    },
  },
  {
    label: "休假原因",
    prop: "reasons",
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
  {
    label: "审批人",
    prop: "auditUsers",
  },
  {
    label: "审批状态",
    prop: "applyState",
    formatter: (row, column, value) => {
      return {
        1: "待审批",
        2: "审批中",
        3: "审批拒绝",
        4: "审批通过",
        5: "作废",
      }[value];
    },
  },
]);
//展示编辑框

const leaveList = ref([]);
//定义记录用户行为
const action = ref("");

const getNewList = (page) => {
  data.pageNum = page;
  getLeaveList();
};

const getLeaveList = async () => {
  console.log(toRaw(data));
  let result;
  try {
    result = await api.getLeaveList(toRaw(data));
  } catch (error) {
    console.log(error.data);
  }

  if (result.data.code == 200) {
    leaveList.value = result.data.data.list;
    console.log(result.data.data);
    leaveList.value.forEach((ele) => {
      ele.time =
        utils.formateDate(new Date(ele.startTime)) +
        "到" +
        utils.formateDate(new Date(ele.endTime));
    });
    total.value = result.data.data.page.total;
    data.pageSize = result.data.data.page.pageSize;
  }
};
getLeaveList();
</script>

<style lang="scss" scoped>
.query-from {
  width: 100%;
  background-color: white;
  .demo-form-inline {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    .el-form-item {
      margin: 0;
    }
  }
}
.base-table {
  overflow: hidden;
  .action {
    margin: 20px 20px;
  }
}

.user-managee {
  overflow: hidden;
}
.example-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
</style>
